<template>
	<view :style="[AppSkinVar]">
		<e-loading-page :loading="loading"  >
			<template #icon>
				<loader ></loader>
			</template>
		</e-loading-page>
		<view class="e-p-20">
			<view class="header e-flex c-white text-center">
				<view class="people e-flex-xy-center e-rela">
					<view>
						<view class="e-font-48 fw-500">
							{{ total }}
						</view>
						<view class="e-font-26 e-m-t-10">
							我的客户
						</view>
					</view>
				</view>
				<view class="e-flex-xy-center">
					<view>
						<view class="e-font-48 fw-500">
							{{ payMoneyAll }}
						</view>
						<view class="e-font-26 e-m-t-10">
							我的消费金额
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="e-p-24 e-font-32 text-center line-h-44">
			{{ $t('user.团队明细') }}
		</view>
		<view class="list-item e-p-30 e-flex" v-for="item in list" :key="item.id">
			<load-image mode="aspectFit" shape="circle" :size="['84rpx']" :src="item.userPhoto" v-if="item.userPhoto">
			</load-image>
			<app-image mode="aspectFit" :size="['84rpx']" src="default-headerImg.png" v-else />
			<view class="e-flex-1 e-m-l-20">
				<view class="fw-500 e-m-b-10">
					{{ item.userName }} ({{ item.levelName }})
				</view>
				<view class="e-flex e-flex-between e-m-b-10">
					<view class="e-font-24 e-flex">
						<view class="e-m-r-30">
							<text>客户数量：</text>
							<text class="c-f0">{{ item.parentCount }}</text>
						</view>
						<view class="e-m-r-30">
								<text>消费额：</text>
							<text class="c-primary">{{ item.payMoney }}</text>
						</view>
					</view>
				</view>
				<view class="e-font-24 c-regular">
					{{ timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss') }}
				</view>
			</view>
		</view>
		<load-more v-if="!isEmpty" :showLoad="showLoad"></load-more>
		<empty v-else paddingTop="100rpx" :text="$t('user.暂无记录')" :icon="$staticPath('default_img.png')"></empty>
	</view>
</template>

<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	// 所有可被装修选中的页面的混入，用于动态修改标题，例如装修的按钮组组件，按钮的文本为xxx，跳转到对应页面时，会将页面的标题修改为xxx
	import layoutPageTitleMixIn from '@/common/mixin/layoutPageTitleMixIn'
	export default defineComponent({
		mixins: [layoutPageTitleMixIn],
	})
</script>

<script setup lang="ts">
	import { ref } from 'vue'
	import {
		getTeamList
	} from '@/common/request/api'
	import { useQueryPage } from '@/common/hooks'
	import {
		onReachBottom
	} from '@dcloudio/uni-app'
	import { timeFormat } from '@/common/utils'

	const loading = ref(true)
	const total = ref(0)
	const payMoneyAll = ref(0)
	const {
		showLoad,
		isEmpty,
		list,
		handleQueryPage,
		handleRefresh
	} = useQueryPage({
		api: getTeamList,
		option: {
			responseKey:"data.rows",
			totalKey:"data.total",
			responseInterception(res) {
				total.value = res.data.total
				payMoneyAll.value = res.payMoneyAll
			}
		}
	})

	handleRefresh().then(() => {
		loading.value = false
	})

	onReachBottom(() => {
		handleQueryPage()
	})
</script>

<style lang="scss" scoped>
	.line-h-44 {
		line-height: 44rpx;
	}

	.c-f0 {
		color: #f0841a;
	}

	.header {
		height: 216rpx;
		background: var(--gradient-primary);

		>view {
			flex: 0 0 50%;
			width: 50%;
		}

		.people {
			&::after {
				content: '';
				position: absolute;
				width: 2rpx;
				height: 72rpx;
				right: 0;
				top: calc(50% - 36rpx);
				background: #ffffff;
				opacity: 0.2;
			}
		}
	}
</style>